<script setup>
import { linkDate } from '@/data-js/link/success.js'
import { watch } from 'vue'
import { time } from '@/utils/link/time.js'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
function goback() {
    store.link_fail()
}
async function test() {
    let sate=await window.go.main.TunStatus.Get_tun()
}

watch(() => store.link_state, (newval) => {
    if (newval == 'false') {
        router.push('/link')
    }
}, { immediate: true })
</script>

<template>
    <div class="contain flex back">
        <div class="net">
            <div class="flex link_state">
                <div class="title">当前连接状态:</div>
                <div :class="store.link_state == 'true' ? 'tip success' : 'tip'"></div>
                <div class="state">
                    {{ store.link_state == 'true' ? '已连接' : '正在尝试重新连接' }}</div>
            </div>
            <div>我的ip: {{ store.list.filter(item=>item.name.indexOf("本机")!==-1).length>0?store.list.filter(item=>item.name.indexOf("本机")!==-1)[0].ip:'' }}</div>
            <div>当前在线人数: {{ store.list.filter(item=>item.status == '已连接').length+1 }}/{{ store.list.length }}</div>
            <div>链接时长: {{ time(store.link_time) }}</div>
            <div><el-button @click="goback" class="linkout" color="rgb(0,116,232)">断开</el-button></div>
        </div>
    </div>
</template>

<style scoped lang="less">
.net>div {
    margin-top: 10px;
}
.link_state{
    align-items: center;
}
.linkout {
    width: 100%;
    height: 35px;
}

.contain {
    display: flex;
    justify-content: center;
    align-items: center;
}

.net-data {
    font-size: 12px;
    color: darkgrey;
}

.tip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(158, 155, 155);
}

.success {
    background-color: rgb(8, 248, 8);
}
.title{
    margin-right: 10px;
}
</style>